import { useState } from 'react';
import { View, Text } from '@tarojs/components';
import { AtIcon } from 'taro-ui';
import Taro, { useDidShow } from '@tarojs/taro';
import { getOldCardInfo } from '@/service/apis/mine';

import './index.scss';

const statusMap = {
  3: '未上传',
  1: '审核通过',
  2: '审核拒绝',
  0: '待审核',
};

/**
 * 老年卡列表
 */
const OldCard = () => {
  const [cardInfo, setCardInfo] = useState<any>({});

  useDidShow(() => {
    init();
  });

  const init = async () => {
    const { data } = await getOldCardInfo();
    setCardInfo(data.cards_status);
  };

  // 跳转身份证绑定
  const goBindIdCardPage = (status: number) => {
    if (status === 0) return;
    Taro.navigateTo({
      url: '/subPages/oldCard/authCard/index?status=' + status,
    });
  };

  // 跳转老年卡绑定
  const goBindOldCardPage = (status: number) => {
    if (status === 0) return;
    Taro.navigateTo({
      url: '/subPages/oldCard/bindOldCard/index?status=' + status,
    });
  };
  // 跳转亲友卡绑定
  const goBindFamilyCardPage = (status: number) => {
    if (status === 0) return;
    Taro.navigateTo({
      url: '/subPages/oldCard/familyCard/index?status=' + status,
    });
  };
  return (
    <View className="page-container">
      <View className="card-info-wrap">
        <View
          className="card-info-item line"
          onClick={() => goBindIdCardPage(cardInfo.card_status)}
        >
          <Text>实名认证状态</Text>
          <View>
            <Text>{statusMap[cardInfo.card_status]}</Text>
            <AtIcon value="chevron-right" size={14} />
          </View>
        </View>
        <View
          className="card-info-item line"
          onClick={() => goBindOldCardPage(cardInfo.old_card_status)}
        >
          <Text>老年卡绑定</Text>
          <View>
            <Text>{statusMap[cardInfo.old_card_status]}</Text>
            <AtIcon value="chevron-right" size={14} />
          </View>
        </View>
        <View className="card-info-item" onClick={() => goBindFamilyCardPage(cardInfo.clan_status)}>
          <Text>直系亲属认证</Text>
          <View>
            <Text className={cardInfo.clan_status === '1' ? 'success' : ''}>
              {statusMap[cardInfo.clan_status]}
            </Text>
            <AtIcon value="chevron-right" size={14} />
          </View>
        </View>
      </View>
    </View>
  );
};
export default OldCard;
